<nz-card class="list_card" [nzTitle]="cardTitle" [nzExtra]="extraTemplate">
  <form nz-form>
    <nz-tabset>
      <!-- 微信小程序配置选项卡 -->
      <nz-tab [nzTitle]="wechatMiniProgramTabTitleTpl">
        <ng-template #wechatMiniProgramTabTitleTpl>
          <span>微信小程序</span>
        </ng-template>

        <!-- 是否启用 -->
        <div nz-col nzSpan="24">
          <div nz-row>
            <div style="margin-bottom: 20px;" nz-col nzSpan="12">
              <label nz-checkbox name="wechatMiniProgramIsActive" [(ngModel)]="wechatMiniProgram.isActive">是否启用(请确认配置正确后再启用！)</label>
            </div>
          </div>
        </div>

        <!-- 小程序Id -->
        <nz-form-item>
          <nz-form-label nzFor="appId">小程序Id</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="小程序Id" name="appId" [attr.disabled]="!wechatMiniProgram.isActive ? 'disabled' : null"
              [(ngModel)]="wechatMiniProgram.appId">
          </nz-form-control>
        </nz-form-item>

        <!-- 小程序密钥 -->
        <nz-form-item>
          <nz-form-label nzFor="appSecret">小程序密钥</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="小程序密钥" name="appSecret" [attr.disabled]="!wechatMiniProgram.isActive ? 'disabled' : null"
              [(ngModel)]="wechatMiniProgram.appSecret">
          </nz-form-control>
        </nz-form-item>

      </nz-tab>
    </nz-tabset>
  </form>

</nz-card>

<ng-template #cardTitle>
  <div class="card_title">
    <i style="margin-right: 10px" nz-icon [type]="'miniprogram'" theme="fill"></i> 小程序配置
  </div>
</ng-template>

<ng-template #extraTemplate>
  <div class="tab_operate">
    <button nz-button type="button" (click)="submitForm()" class="ant-btn ant-btn-primary"><span>全部保存</span></button>
  </div>
</ng-template>
